import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native'
import DataStore from '../expand/dao/DataStore'

const KEY = 'save_key';

export default class DataStoreDemoPage extends Component {

    constructor(props) {
        super(props);
        this.state = {
            showText: ''
        }
        this.datastore = new DataStore();
    }

    loadData() {
        let url = `https://api.github.com/search/repositories?q=${this.value}`;
        this.datastore.fetchData(url)
            .then(data => {
                let showData = `初次数据加载事件：${new Date(data.timestamp)} \n ${JSON.stringify(data.data)}`;
                this.setState({
                    showText: showData
                })
            })
            .catch(e => {
                console.error(e);
            })
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.input_container}>
                    <TextInput
                        style={styles.input}
                        onChangeText={text => {
                            this.value = text;
                        }}
                    />
                    <Text onPress={() => {
                        this.loadData();
                    }} >
                        获取
                    </Text>
                    <Text>
                        {this.state.showText}
                    </Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
    },
    input: {
        height: 30,
        flex: 1,
        borderColor: 'black',
        borderWidth: 1,
        marginRight: 10
    },
    input_container: {
        flexDirection: 'row',
        alignItems: 'center'
    }
})